$baseFont: 37.5;

@function parseInt($n) {
  @return $n / ($n * 0 + 1); /* 2 */
}

@function rem($px) {
  $list: ();
  @each $item in $px {
    @if $item == 0 or $item == auto {
      $list: append($list, $item);
    } @else {
      $unit: unit($item);
      $val: parseInt($item);

      @if $unit == px {
        $list: append($list, ($val / $baseFont + rem))
      }

      @if $unit == rem {
        $list: append($list, $item);
      }
    }
  }
  @return $list;
}

@import "mixin";

body {
  padding-bottom: rem(50px);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: rem(50px);
  background-color: #fff;
  >.footer-item {
    flex: 1;
    height: 100%;
    text-align: center;
    font-size: 0;
    >a {
      display: block;
      >.icon-wrapper {
        width: 100%;
        height: rem(36px);
        line-height: rem(36px);
        >.basefont {
          display: inline-block;
          vertical-align: middle;
          width: rem(20px);
          height: rem(24px);
          @include bg-image('../images/icon-b');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.licai {
          display: inline-block;
          vertical-align: middle;
          width: rem(22px);
          height: rem(22px);
          @include bg-image('../images/icon-l');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.ceping {
          display: inline-block;
          vertical-align: middle;
          width: rem(20px);
          height: rem(20px);
          @include bg-image('../images/icon-c');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.center {
          display: inline-block;
          vertical-align: middle;
          width: rem(18px);
          height: rem(22px);
          @include bg-image('../images/icon-m');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
      }
      >span {
        display: inline-block;
        width: 100%;
        font-size: 10px;
        color: #acacac;
      }
    }
    &.active {
      >a {
        >.icon-wrapper {
          >.basefont {
            @include bg-image('../images/icon-b-active')
          }
          >.licai {
            @include bg-image('../images/icon-l-active')
          }
          >.ceping {
            @include bg-image('../images/icon-c-active')
          }
          >.center {
            @include bg-image('../images/icon-m-active')
          }
        }
      }
    }
  }
}